<!-- 兑换贝壳 -->
<template>
	<view class="container">
		<view class="now-have">
			<view class="name">当前拥有黑贝壳数量</view>
			<text class="now-num">{{ nowHaveShell.toFixed(2) }}</text>
		</view>
		<view class="numbers">
			<view class="name">转换数量</view>
			<view class="input-box">
				<input type="number" placeholder="请输入转换数量" :value="exchangeNum" placeholder-style="font-size:30rpx;font-weight:normal"
				 @input="exchangeNumInput" />
				<view class="all-exchange" @tap="allExchange">全部转换</view>
			</view>
			<view class="number-tips">
				转换成功后，还剩余{{Number(remaining).toFixed(2)}}
			</view>
		</view>
		<view class="submit-btn" @tap="exchangeSub">提交</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import {
		getsellershellcount,
		shellTransferUser,
		blackExchangeOthers,
		sellerIndex
	} from '@/api/merchant.js'
	export default {
		components: {},
		data() {
			return {
				nowHaveShell: 0,
				exchangeNum: '',
				remaining: 0, //剩余
				data: {},
				shellList: [],
				seller_id: null,
				shell_id: null,
			}
		},
		onLoad(options) {
			getsellershellcount().then(res => {
				this.shellList = res.data.list
				this.seller_id = uni.getStorageSync("sellerInfo").seller_id
				this.shell_id = this.shellList[0].id
				this.nowHaveShell = Number(this.shellList[0].count);
			})
		},
		methods: {
			exchangeNumInput(e) {
				this.exchangeNum = e.detail.value;
				this.remaining = this.nowHaveShell - this.exchangeNum;
			},
			exchangeSub() {
				if (this.exchangeNum == 0 || this.exchangeNum > this.nowHaveShell) {
					return uni.showToast({
						duration: 1500,
						title: "转换数量不正确",
						icon: "none"
					})
				}
				uni.showLoading({
					mask:true
				})
				let data = {
					shell_id: this.shell_id,
					seller_id: this.seller_id,
					shell_num: this.exchangeNum
				}
				shellTransferUser(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
					setTimeout(function() {
						uni.reLaunch({
							url: `/business/business`
						});
					}, 1000);
				})
			},
			allExchange() {
				this.exchangeNum = this.nowHaveShell;
				this.remaining = this.nowHaveShell - this.exchangeNum;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		.now-have,
		.numbers {
			margin: 30rpx 0;

			.name {
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.now-num {
				font-size: 60rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}

		.now-have {
			width: 85%;
			margin: 20rpx auto;
			border-bottom: 1px solid #EEEEEE;

		}

		.numbers {
			width: 85%;
			margin: auto;

			.input-box {
				position: relative;

				input {
					font-size: 60rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					width: 100%;
					height: 80rpx;
					border-bottom: 1px solid #EEEEEE;
				}

				.all-exchange {
					color: #57BE6A;
					font-size: 24rpx;
					font-weight: 400;
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 26rpx;
					border-radius: 5px;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 10rpx;
					z-index: 9;
				}
			}

			.number-tips {
				font-size: 24rpx;
				margin-top: 8rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
		.submit-btn {
			width: 85%;
			margin: 100rpx auto 0;
			text-align: center;
			padding: 24rpx 0;
			background: rgba(87, 190, 106, 1);
			border-radius: 40px;
			font-size: 32rpx;
			font-weight: bold;
			color: white;
		}

	}
</style>
